<template>
  <el-row>
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('orderModule.record.userAuthenticationDetails')">
        <table v-if="orderData" class="table">
          <tr v-for="item in $t('orderModule.record.basicUserInfo')" :key="item.id">
            <td>
              {{ item.name }}
            </td>
            <td v-if="item.reflect === 'approveEffectDay'">
              {{ orderData[item.reflect] || 'no' }}
              <el-tag :type="orderData['approveEffectDay'] ? 'success' : 'danger'">
                {{ orderData['approveEffectDay'] ? $t('auth')['true'] : $t('auth')['false'] }}
              </el-tag>
            </td>
            <td v-if="item.reflect=== 'gender'">
              {{ $t('orderModule.record.genderType')[orderData[item.reflect]] }}
            </td>
            <td v-if="item.reflect!== 'gender' && item.reflect !== 'approveEffectDay'">
              {{ orderData[item.reflect] }}
            </td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('orderModule.record.nowIdCard')">
        <el-image
          style="width: 400px; height: 400px"
          :src="orderData['front']"
          :preview-src-list="[orderData['front']]"
        />
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
import { getAuthInfo } from '@/api/user'
export default {
  name: 'AuthDetail',
  data() {
    return {
      orderData: {}
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getAuthInfo(this.$route.query.userId)
        .then(res => {
          if (res.success) {
            this.orderData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
  margin: 10px;
}
.table{
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  td{
    border: 1px #cccccc solid;
    height: 40px;
    line-height: 40px;
  }
  td:first-child{
    text-align: right;
    padding-right: 10px;
  }
  td:last-child{
    text-align: left;
    padding-left: 10px;
  }
}
</style>
